<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" style="margin-left: 5px" @click="exportData" :loading="exportLoading">导出
    </el-button>
    <div class="filter-container">
      <el-input class="filter-item" style="width: 230px" clearable v-model="query.queryString" placeholder="输入关键字查询"
        @keyup.enter.native="research" @clear="research"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns">
      <template v-slot:content="v">
        <span v-if="v.key == 'error_flag'"><span :class="row.statusClass">{{ v.row[v.key] }}</span></span>
        <span v-else>{{ v.row[v.key] }}</span>
      </template>
    </z-table>
    <pagination v-show="total > 0" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @pagination="getList" />
  </div>
</template>

<script>
import { arrayToObject, dateTools, deepClone } from '@/utils'
import Pagination from '@/components/Pagination'
import zTable from '@/views/_common/table'
import dayjs from 'dayjs'

const source_config = {
  fields: {
    barcode: { label: '条码内容', grid: { width: 170 } },
    batch_number: { label: '条码序号', grid: { width: 150 } },
    code_type: { label: '条码种类', grid: { width: 100 } },
    key_part_no: { label: '产品型号编码', grid: { width: 100 } },
    key_part_name: { label: '产品型号名称', grid: { width: 120 } },
    sku_spec: { label: '产品规格', grid: {} },
    print_factory: { label: '工厂', grid: { width: 80 } },
    print_type: { label: '打印类型', grid: { width: 100 } },
    create_user: { label: '打印人员', grid: { width: 80 } },
    create_time: { label: '打印时间', grid: { width: 140 } },
  },
}
const emptyData = {}
const defaultQurey = {}
// const statusArry = {0: 'PASS', 1: 'FAIL'}
// const statusClass = {'0': 'bg-green', '1': 'bg-red'}

export default {
  name: 'barcodeReport',
  components: { Pagination, zTable },
  data: function () {
    return {
      name: '条码打印记录',
      api: this.$api.barcodeReport,
      pageLoading: false,
      exportLoading: false,
      query: {
        page: 1,
        size: 10,
        queryString: '',
      },
      list: [],
      exprotList: [],
      total: 0,
      config: source_config,
      // options: { line: [], group: [] },
      datePickerOption: {
        shortcuts: [
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '当月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const end = today
              const start = dateTools.first_day(today)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '上月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const start = dateTools.first_day(dateTools.add_month(today, -1))
              const end = dateTools.last_day(start)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '上上月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const start = dateTools.first_day(dateTools.add_month(today, -2))
              const end = dateTools.last_day(start)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      tableProps: {
        border: true,
        hideOperations: true,
      },
      columns: [
        { title: '条码内容', key: 'barcode', width: 170 },
        { title: '条码序号', key: 'batch_number', width: 150 },
        { title: '条码种类', key: 'code_type', width: 100 },
        { title: '产品型号编码', key: 'key_part_no', width: 100 },
        { title: '产品型号名称', key: 'key_part_name', width: 120 },
        { title: '产品规格', key: 'sku_spec' },
        { title: '工厂', key: 'print_factory', width: 80 },
        { title: '打印类型', key: 'print_type', width: 100 },
        { title: '打印人员', key: 'create_user', width: 80 },
        { title: '打印时间', key: 'create_time', width: 140 },
      ],
    }
  },
  methods: {
    getList() {
      this.pageLoading = true
      this.$request(this.api, this.formatQuery(this.query))
        .then((r) => {
          console.info(r)
          this.pageLoading = false
          this.list = this.formatData(r.list)
          this.total = r.total
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    research() {
      this.query.page = 1
      this.total = 0
      this.list = []
      this.getList()
    },
    formatQuery(query, nopage = false) {
      let tmp = deepClone(query)

      return tmp
    },
    formatData(data) {
      return data.map((item) => {
        let tmp = { ...item }
        return tmp
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }),
      )
    },
    exportData() {
      this.exportLoading = true
      this.$request(this.api, this.formatQuery(this.query, true))
        .then((r) => {
          this.exprotList = this.formatData(r.list)
          import('@/vendor/Export2Excel')
            .then((excel) => {
              const filterVal = Object.keys(this.config.fields)
              const tHeader = filterVal.map((item) => {
                return this.config.fields[item].label || ''
              })
              const data = this.formatJson(filterVal, this.exprotList)
              excel.export_json_to_excel({
                header: tHeader,
                data,
                filename: this.name + '_' + dateTools.FormatDate(),
              })
              this.exportLoading = false
            })
            .catch(() => {
              this.exportLoading = false
            })
        })
        .catch(() => {
          this.exportLoading = false
        })
    },
  },
  created: function () {
    this.getList()
    // this.$request(this.$api.line + 'getlistbypage',{page:1,size:999}).then((r) => {
    //   this.options.line = r.list
    // })
    // this.$request(this.$api.group + 'getlist', { mes_flag: 'Y' }).then((r) => {
    //   this.options.group = r
    // })
  },
}
</script>

<style scoped>
</style>
